<template>
  <div class="params">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
        title="注意：只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-row style="margin: 15px 0">
        <el-col>
          <span>选择商品分类：</span>
          <el-cascader
            v-model="selectedCateKeys"
            :options="cateList"
            :props="cateProps"
            @change="handleChange"
          ></el-cascader>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="primary"
            size="mini"
            :disabled="isBtnDisabled"
            @click="addDialogVisible = true"
            >添加动态参数</el-button
          >
          <el-table :data="manyTableData" border stripe>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                >编辑</el-button
              >
              <el-button type="danger" icon="el-icon-delete" size="mini"
                >删除</el-button
              >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button
            type="primary"
            size="mini"
            :disabled="isBtnDisabled"
            @click="addDialogVisible = true"
            >添加静态参数</el-button
          >
          <el-table :data="onlyTableData" border stripe>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                >编辑</el-button
              >
              <el-button type="danger" icon="el-icon-delete" size="mini"
                >删除</el-button
              >
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog :title="showTitle" :visible.sync="addDialogVisible" width="50%">
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="120px"
      >
        <el-form-item :label="showTitle" prop="attr_name">
          <el-input v-model="addForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCateListApi,
  getAddGoodsParamsApi,
  getAddParamsApi,
} from "@/api/user";
export default {
  name: "ParamsIndex",
  data() {
    return {
      cateList: [],
      cateProps: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      selectedCateKeys: [],
      activeName: "many",
      manyTableData: [],
      onlyTableData: [],
      addDialogVisible: false,
      // 添加参数的表单数据对象
      addForm: {
        attr_name: "",
      },
      addFormRules: {
        attr_name: [{ required: true, message: "请输入参数", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    async getCateList() {
      const res = await getCateListApi();
      // console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("获取商品列表失败！");
      }
      this.cateList = res.data;
    },
    handleChange() {
      // console.log(this.selectedCateKeys);
      this.getParmarsData();
    },
    handleTabClick() {
      // console.log(this.activeName);
      this.getParmarsData();
    },
    async getParmarsData() {
      const res = await getAddGoodsParamsApi(this.selectedCateKeys[2], {
        sel: this.activeName,
      });
      // console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("获取参数失败！");
      }
      if (this.activeName === "many") {
        this.manyTableData = res.data;
      } else {
        this.onlyTableData = res.data;
      }
    },
    async addParams() {
      this.$refs.addFormRef.validate();
      const res = await getAddParamsApi(this.selectedCateKeys[2], {
        attr_name: this.addForm.attr_name,
        attr_sel: this.activeName,
      });
      // console.log(res);
      if (res.meta.status !== 201) {
        return this.$message.error("添加参数失败!");
      }
      this.$message.success("添加参数成功！");
      this.addDialogVisible = false;
      this.getCateList();
    },
  },
  computed: {
    isBtnDisabled() {
      if (this.selectedCateKeys.length !== 3) {
        return true;
      }
      return false;
    },
    showTitle() {
      if (this.activeName === "many") {
        return "添加动态参数";
      }
      return "添加静态属性";
    },
  },
};
</script>

<style lang="scss" scoped>
.params {
  .el-breadcrumb {
    margin-bottom: 15px;
  }
  .el-table {
    margin-top: 15px;
  }
}
</style>
